<template>
  <div>
    <el-row class="row-bg" justify="center">
      <el-col :span="8">
        <img class="nav-image" src="@/assets/image/callout.svg" alt="callout" />
        <p class="fllow-you">随心写作，自由表达</p>
        <el-button type="primary" @click="$router.push('/about')">开始写文章</el-button>
        <h3 class="columns-title" style="margin: 20px 0">发现精彩</h3>
      </el-col>
    </el-row>
    <div class="content">
      <el-row :gutter="20">
        <el-col :span="8" v-for="column in columns" :key="column._id">
          <el-card :body-style="{ padding: '20px' }">
            <!-- {{ column }} -->
            <img
              :src="column.avatar.url"
              class="image"
              style="width: 50px; height: 50px; border-radius: 50%"
            />
            <div style="padding: 14px">
              <h5 class="time">{{ column.title }}</h5>
              <p class="desc">{{ column.description }}</p>
              <div class="bottom">
                <router-link
                  :to="`/column?author=${column._id}`"
                  custom
                  v-slot="{ navigate }"
                >
                  <el-button type="primary" @click="router.push(`/column?id=${column._id}`)" plain
                    >进入专栏</el-button
                  >
                </router-link>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-button
      type="primary"
      v-if="canLoadMore"
      plain
      class="load-more"
      @click="getList('loadmore')"
      >加载更多</el-button
    >
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive, toRefs, computed } from "vue";
import { useStore } from "vuex";
import { getColumnList } from "../utils/api";
import { useRouter, useRoute } from "vue-router";
const columns = ref([]);
const router = useRouter();
const total = ref(1);
const canLoadMore = ref(true);
const params = {
  currentPage: 1,
  pagesize: 6,
  // id:useStore.state.user._id
};

const getList = (type?: string) => {
  if (type == "loadmore") {
    params.currentPage++;
  }

  getColumnList(params).then((res: any) => {
    columns.value = columns.value.concat(res.data.list);
    total.value = res.data.total;
    if (total.value <= columns.value.length) {
      canLoadMore.value = false;
    }
  });
};
getList();
</script>

<style scoped lang='scss'>
.nav-image {
  width: 200px;
  height: auto;
}
.content image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.fllow-you {
  text-align: center;
  margin: 20px 0;
}

.desc {
  margin: 20px 0;
  font-size: 14px;
  text-align: left;
  text-indent: 2em;
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  line-height: 20px;
  min-height: 40px;
}
:deep(.load-more) {
  width: 200px;
}
</style>